<template>
  <el-dialog width="550" v-model="showDialog" :close-on-click-modal="false" :modal-append-to-body="false"
    :close-on-press-escape="false">
    <template #header>
      <span>审批</span>
    </template>
    <div class="container">
      <el-form ref="refApprove" :model="queryParams" :inline="true" label-width="100px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="ID：">
              {{ queryParams.id }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="导出标题：">
              {{ queryParams.title }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="提交人：">
              {{ queryParams.creator }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型:">
              {{ queryParams.type }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="提交时间:">
              {{ queryParams.createTime }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审批状态:" prop="status">
              <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
                <el-option label="审批通过" value="1" />
                <el-option label="审批驳回" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="queryParams.status === '2'">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="queryParams.remark" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <slot name="extendBtn"></slot>
        <el-button type="primary" @click="approvelSubmit()">提交</el-button>
        <el-button @click="showDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
// core
import { ref } from "vue";

import {
  approveSubmit
} from "@/api/biz/exportApi";
import { ElMessage } from 'element-plus'

const emit = defineEmits(['reflash'])

const { proxy } = getCurrentInstance();

const rules = {
  status: [{ required: true, trigger: "blur", message: "请选择" }],
  remark: [{ required: true, trigger: "blur", message: "请输入" }],
};

const queryParams = ref({})
const onlyReadParams = ref({})
const refApprove = ref(null)

const showDialog = ref(false);

const approvelSubmit = () => {
  proxy.$refs["refApprove"].validate(valid => {
    if (valid) {
      let params = {
        id: queryParams.value.id,
        remark: queryParams.value.remark,
        status: queryParams.value.status
      }
      console.log(params)

      approveSubmit(params).then(res => {
        ElMessage({
          message: '审批成功',
          type: 'success',
          plain: true,
        })
        showDialog.value = false
      })

      emit('reflash')
    }
  });
}

/**
 * 父组件调弹框显示方法
 */
const show = (row) => {
  // console.log(row)
  queryParams.value = JSON.parse(JSON.stringify(row))
  queryParams.value.status = '1'

  queryParams.value.createTime = dateFormatter(row, null, row.createTime, null)
  showDialog.value = true;
};
const hide = () => {
  showDialog.value = false;
};

function dateFormatter(row, column, cellValue, index) {
  if (!cellValue) { return }
  // 创建一个新的 Date 对象
  var originalDate = new Date(cellValue);

  // 获取年、月、日、时、分、秒
  var year = originalDate.getFullYear();
  var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
  var day = ("0" + originalDate.getDate()).slice(-2);
  var hours = ("0" + originalDate.getHours()).slice(-2);
  var minutes = ("0" + originalDate.getMinutes()).slice(-2);
  var seconds = ("0" + originalDate.getSeconds()).slice(-2);

  // 格式化输出
  var formattedDateTimeString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  return formattedDateTimeString;
}


defineExpose({ show, hide });
</script>
